<template>
  <transition name="bounce" mode="out-in">
    <div class="mh-container">
      <mh-header :headName="headname"> </mh-header>
      <div class="mui-content">

        <div class="mh-form">
          <ul>
            <li class="mh-form-item">
              <div class="mh-input-row" @tap="typePicker">
                <input type="text" v-model="type" placeholder="请选择地址类型" readonly>
              </div>
            </li>
            <li class="mh-form-item">
              <div class="mh-input-row">
                <input type="text" v-model="nickName" placeholder="请输入商家名称">
              </div>
            </li>
            <li class="mh-form-item">
              <div class="mh-input-row">
                <input type="text" v-model="contactName" placeholder="请输入联系人姓名">
              </div>
            </li>
            <li class="mh-form-item">
              <div class="mh-input-row">
                <input type="text" v-model="contactPhone" placeholder="请输入联系电话">
              </div>
            </li>
            <li class="mh-form-item" @tap="openCityPicker">
              <div class="mh-input-row">
                <input type="text" v-model="liveAdd" placeholder="请选择省份城市" readonly>
              </div>
            </li>
            <li class="mh-form-item">
              <div class="mh-input-row">
                <input type="text" v-model="detailAdd" placeholder="请填写具体地址">
              </div>
            </li>
          </ul>
        </div>
        <div class="mui-content-padded lg-btn-box">
          <button type="button" class="mui-btn-block mh-btn" @click="completeProfile">确定</button>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
  import MhHeader from '@/components/mh-header/mh-header'
  import {cityData} from "@/assets/js/city.data-3";
  import {MH_API} from "@/api/api";

  export default {
    name: "new-pwd",
    data () {
      return {
        headname: '新增地址',
        id: null,
        contactPhone: '',
        contactName: '',
        nickName: '',
        liveAdd: '',
        detailAdd: '',
        type: '地址类型：旅游',
        typeVal: 1,
        typeList: [{
          value:'1',
          text:'旅游'
        },{
          value:'2',
          text:'品茶'
        },{
          value:'3',
          text:'浪游'
        },{
          value:'4',
          text:'聚餐'
        },{
          value:'5',
          text:'其他'
        }]
      }
    },
    methods: {
      completeProfile () {
        let self = this;
        if(self.nickName=='' || self.contactName=='' || self.contactPhone==''){
          mui.toast('请输入内容');
          return false
        }
        if(self.id){
          MH_API.editAddress({
            merchant_name: self.nickName,
            contacts: self.contactName,
            contacts_phone: self.contactPhone,
            city: self.liveAdd,
            address: self.detailAdd,
            province: self.liveAdd,
            type: 1
          }).then(res => {
            if (res.status === 200) {
              mui.toast('操作成功');
              setTimeout(function(){
                self.$router.go(-1)
              }, 1500)
            }
            else{
              mui.toast(res.msg);
            }
          })
        }
        else{
          MH_API.addAddress({
            merchant_name: self.nickName,
            contacts: self.contactName,
            contacts_phone: self.contactPhone,
            city: self.liveAdd,
            address: self.detailAdd,
            province: self.liveAdd,
            type: 1
          }).then(res => {
            if (res.status === 200) {
              mui.toast('操作成功');
              setTimeout(function(){
                self.$router.go(-1)
              }, 1500)
            }
            else{
              mui.toast(res.msg);
            }
          })
        }
      },
      _getParam (obj, param) {
        return obj[param] || '';
      },
      typePicker () {
        let _self = this;
        let picker = new mui.PopPicker();
        picker.setData(this.typeList);
        picker.show(function (selectItems) {
          _self.typeVal = selectItems[0].value;
          _self.type = "地址类型："+selectItems[0].text;
        })
      },
      // 选择居住地
      openCityPicker () {
        let _this = this;
        let cityPicker = new mui.PopPicker({
          layer: 3
        });
        cityPicker.setData(cityData);
        cityPicker.show(function(items) {
          _this.liveAdd = `${_this._getParam(items[0], 'text')}${_this._getParam(items[1], 'text')}${_this. _getParam(items[2], 'text')}`;
        });
      }
    },
    components: {
      MhHeader
    },
    created(){
      let id = this.$route.query.id;
      let self = this;
      if(id){
        this.id = id;
        this.headname = '编辑地址';
        MH_API.getAddress({
          id: id
        }).then(res => {
          if (res.status === 200) {
            self.nickName = res.data.merchant_name;
            self.contactPhone = res.data.contacts_phone;
            self.contactName = res.data.contacts;
            self.liveAdd = res.data.city;
            self.detailAdd = res.data.address;
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '../../assets/css/mixin';
  .mui-content {background: #fff;}
  .mui-input-row.label-lg>label {width: 50%}
  .mui-input-row {
    display: flex;
    &>input {
      flex: 1;
      text-align: right;
    }
    &>div {flex: 1}
  }
  .mh-btn {margin-top: 4.5rem;}

  .mh-form-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 5rem;
    line-height: 5rem;
    padding: 1px 1rem;
    border-bottom: 1px solid #eee;
    color: #666;
    font-size: 1.4rem;
    overflow: hidden;
    &.item-lg {
      height: 6.5rem;
      line-height: 6.5rem;
    }
  }
  .upload-box {
    position: relative;
    width: 5rem;
    height: 5rem;
    background: #eee;
    color: #dedede;
    text-align: center;
    .upload-inner {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
    }
  }
  .mh-input-row {
    flex: 1;
    height: 100%;
    &>input {
      margin: 0;
      border: 0;
    }
  }
</style>
